<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>INOCHI Ribbon</title>
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="scripts/tinybox.js"></script>
<script type="text/javascript" src="scripts/jquery.alerts.js"></script>
<script type="text/javascript" src="scripts/inochi.ribbon.js"></script>
<script type="text/javascript" src="scripts/inochi.js"></script>
<script type="text/javascript">
$(function(){
	$("#page").inochiRibbon({
		tabIndex: '10001',
		theme: "black",
		icon: "images/logo.png",
		logo: "Logo",
		prefixForm: 'frm',
		extForm: 'php',
		ribbonTabs: [
			//Add ribbon tab
			{id:'10001', caption: 'Home', 
				ribbonGroups: [
					{id:'100011001', caption:'Clipboard',
					items: [
						{id:'2000001', type:'buttonsplitpopup', size:'large', name:'Paste', image:'paste.png', caption:'Paste',popups:[
							{id:'3000001', type:'button', size:'small', name:'paste', image:'', caption:'Paste'},
							{id:'3000002', type:'button', size:'small', name:'pastespc', image:'pasteall.png', caption:'Paste Special'}
						]},
						{id:'2000002', type:'button', size:'small', name:'cut', image:'cut.png', caption:'Cut', enabled: 1, form: 'Book'},
						{id:'2000003', type:'button', size:'small', name:'copy', image:'copy.png', caption:'Copy', enabled: 1, form: 'About'},
						{id:'2000004', type:'button', size:'small', name:'paste', image:'format.png', caption:'Format Painter', form: 'Help'}
					],
					optionButton: [
						{id:'2200001', name:'clipboardOption'}
					]},
					{id:'100011002', caption:'Font',
						items:[
							{id:'2001001', type:'label', size:'small', name:'indent', caption:'Indent', enabled: 1},
							{id:'2001002', type:'check', size:'small', name:'ruler', caption:'Ruler', enabled: 1},
							{id:'2001003', type:'check', size:'small', name:'view', caption:'View', enabled: 1, checked: 1},
							{id:'2001004', type:'label', size:'small', name:'indent', caption:'Indent', enabled: 0},
							{id:'2001005', type:'check', size:'small', name:'ruler1', caption:'Ruler 1', enabled: 0},
							{id:'2001006', type:'check', size:'small', name:'view1', caption:'View 1', enabled: 0, checked: 1},
							{id:'2001007', type:'text', size:'small', name:'textbox1', caption:'TextBox', enabled: 0},
							{id:'2001008', type:'text', size:'small', name:'textbox2', caption:'TextBox'},
							{id:'2001010', type:'spin', size:'small', name:'spin1', caption:'Spin'},
							{id:'2001011', type:'combo', size:'small', name:'combobox', caption:'Combo', width: 20,
								popups:[
									{id:'20010111', type:'button', size:'small', name:'size1', image:'', caption:'1'},
									{id:'20010112', type:'button', size:'small', name:'size2', image:'', caption:'2'},
									{id:'20010113', type:'button', size:'small', name:'size3', image:'', caption:'3'},
									{id:'20010114', type:'button', size:'small', name:'size4', image:'', caption:'4'},
									{id:'20010115', type:'button', size:'small', name:'size5', image:'', caption:'5'}
								]
							}
						]
					},
					{id:'100011003', caption:'Paragraph'},
					{id:'100011004', caption:'Style',
						gallery:[
							{id:'5000001', name:'galStyle', line:'hor', width: 370, height: 54, 
							items:[
									{id:'500001', type:'button', size:'large', name:'style1', image:'style1.png'},
									{id:'500002', type:'button', size:'large', name:'style2', image:'style2.png'},
									{id:'500003', type:'button', size:'large', name:'style3', image:'style3.png'},
									{id:'500004', type:'button', size:'large', name:'style4', image:'style4.png'},
									{id:'500005', type:'button', size:'large', name:'style5', image:'style5.png'},
									{id:'500006', type:'button', size:'large', name:'style6', image:'style5.png'},
									{id:'500007', type:'button', size:'large', name:'style7', image:'style4.png'},
									{id:'500008', type:'button', size:'large', name:'style8', image:'style3.png'},
									{id:'500009', type:'button', size:'large', name:'style9', image:'style2.png'},
									{id:'500010', type:'button', size:'large', name:'style10', image:'style1.png'}
								]
							}
						]
					},
					{id:'100011005', caption:'Editing'}
				]
			},
			{id:'10002', caption: 'Insert', 
				ribbonGroups: [
					{id:'100021001', caption:'Pages'},
					{id:'100021002', caption:'Tables'},
					{id:'100021003', caption:'Illustrations'},
					{id:'100021004', caption:'Links'},
					{id:'100021005', caption:'Header & Footer'}
				]
			},
			{id:'10003', caption: 'Page Layout', 
				ribbonGroups: [
					{id:'100031001', caption:'Themes'},
					{id:'100031002', caption:'Page Setup'},
					{id:'100031003', caption:'Page Background'},
					{id:'100031004', caption:'Paragraph'},
					{id:'100031005', caption:'Arrange'}
				]
			},
			{id:'10004', caption: 'References', 
				ribbonGroups: [
					{id:'100041001', caption:'Table of Contents'},
					{id:'100041002', caption:'Footnotes'},
					{id:'100041003', caption:'Citation & Bibliography'},
					{id:'100041004', caption:'Captions'},
					{id:'100041005', caption:'Index'}
				]
			},
			{id:'10005', caption: 'Mailings', 
				ribbonGroups: [
					{id:'100051001', caption:'Create'},
					{id:'100051002', caption:'Start Mail Merge'},
					{id:'100051003', caption:'Write & Insert Fields'},
					{id:'100051004', caption:'Preview Results'},
					{id:'100051005', caption:'Finish'}
				]
			},
			{id:'10006', caption: 'Review', 
				ribbonGroups: [
					{id:'100061001', caption:'Proofing'},
					{id:'100061002', caption:'Language'},
					{id:'100061003', caption:'Comments'},
					{id:'100061004', caption:'Tracking'},
					{id:'100061005', caption:'Changes'},
					{id:'100061006', caption:'Compare'},
					{id:'100061007', caption:'Protect'}
				]
			},
			{id:'10007', caption: 'View', 
				ribbonGroups: [
					{id:'100071001', caption:'Document Views'},
					{id:'100071002', caption:'Show'},
					{id:'100071003', caption:'Zoom'},
					{id:'100071004', caption:'Window'},
					{id:'100071005', caption:'Macros'}
				]
			}
		],
		ribbonButtons: {
			items: [
				{id:'11001', image:'help.png', type:'button', name:'help', caption:''},
				{id:'11002', image:'about.png', type:'button', name:'about', caption:''}
			]
		},
		quickBar: {position:'below', 
			items: [
				{id:'9000001', type:'button', size:'small', name:'cut', image:'cut.png', enabled: 1},
				{id:'9000002', type:'button', size:'small', name:'copy', image:'copy.png', enabled: 1},
				{id:'9000003', type:'button', size:'small', name:'paste', image:'format.png', checked: 0}
			]
		},
		statusBar: {
			panels: [
				{id: '555000', name: 'panel0', align:'left',
					items:[
						{id:'5551000', type:'label', size:'small', name:'label6', image:'pasteall.png', caption:'Ready'}
					]
				},
				{id: '555001', name: 'panel1', align:'left',
					items:[
						{id:'5551001', type:'button', size:'small', name:'paste', image:'info.png', caption:'Page: 1 of 1'},
						{id:'5551002', type:'button', size:'small', name:'pastespc', image:'pasteall.png', caption:''}
					]
				},
				{id: '555002', name: 'panel2', align:'left',
					items:[
						{id:'5551003', type:'button', size:'small', name:'paste', image:'', caption:'Page: 1 of 1'},
						{id:'5551004', type:'check', size:'small', name:'check2', image:'pasteall.png', caption:'Check'}
					]
				},
				{id: '555003', name: 'panel2', align:'right',
					items:[
						{id:'5551005', type:'button', size:'small', name:'paste', image:'info.png', caption:'Page: 1 of 1'},
						{id:'5551006', type:'button', size:'small', name:'pastespc', image:'pasteall.png', caption:''}
					]
				}
			]
		},
		toolBar: {
			items: [
				{id:'70001', image:'add.png', type:'button', name:'btnadd', caption:'Tambah'},
				{id:'70002', type:'|', size:'small', name:'spr1'},
				{id:'70003', image:'save.png', type:'button', name:'btnsave', caption:'Save'}
			]
		},
		filePage: {
			items:[
				{id:'6661001', type:'button', name:'filesave', image:'save.png', caption:'Save'},
				{id:'6661010', type:'popup', name:'info', caption:'Info'},
				{id:'6661011', type:'popup', name:'recent', caption:'Recent'},
				{id:'6661012', type:'popup', name:'new', caption:'New'}
			]
		},
		toolTip: {
			items:[
				{id:'100011001', type:'0', image:'save.png', title:'Judul', content:'Isi'}
			]
		},
		onReady: function(obj){
			$('input[type=text]').each(function(){
				itemName = $(this).attr('itemName');
				switch(itemName){
				case "spin1":
					$(this).val('10');
				break;
				}
			});
		},
		onClick: function(obj){
			itemName = $(obj).attr('itemName');
			$('#filePageRight').html("");
			
			switch(itemName){
			case "info":
				var htmlRight = $.ajax({
					url: 'forms/info.php',
					async: false
				}).responseText;
				
				$('#filePageRight').html(htmlRight);
			break;
			default:
				alert('onChange on: ' + itemName);
			break;
			}
		},
		onChange: function(obj){
			itemName = $(obj).attr('itemName');
			
			switch(itemName){
			default:
				alert('onChange on: ' + itemName);
			break;
			}
			
		},
		onKeypress: function(obj, event){
			itemName = $(obj).attr('itemName');
			/*
			if (event.which == 13) {
				event.preventDefault();
				switch(itemName){
				default:
					alert(itemName);
				break;
				}
			}
			*/
		},
		onKeydown: function(obj, event){
			itemName = $(obj).attr('itemName');
			/*
			if (event.keyCode == 13) {
				switch(itemName){
				default:
					alert(itemName + event.keyCode);
				break;
				}
			}
			*/
		},
		onKeyup: function(obj, event){
			itemName = $(obj).attr('itemName');
			/*
			if (event.keyCode == 13) {
				switch(itemName){
				default:
					alert(itemName + event.keyCode);
				break;
				}
			}
			*/
		}
   });
});
</script>
</head>
<body>
	<div id="page">
		<!-- silent is gold -->
	</div>
</body>
</html>